<template>
  <view class="container">
    <view class="search-box">
      <u-search
        v-model="keyword"
        placeholder="搜索你需要的产品"
        :show-action="false"
        :clearabled="true"
        shape="round"
        height="72"
        bg-color="#ffffff"
      ></u-search>
    </view>

    <view class="content">
      <!-- 左侧分类列表 -->
      <scroll-view scroll-y class="left-menu flex justify-center align-center">
        <view
          v-for="(item, index) in categories"
          :key="index"
          class="menu-item margin-tb margin-left-sm"
          :class="{ active: currentCategory === index }"
          @tap="switchCategory(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>

      <!-- 右侧商品列表 - 不使用滚动 -->
      <view class="right-content">
      
        <view class="product-container">
          <view 
            class="product-item text-bold"
            v-for="(item, index) in currentProducts"
            :key="index"
          >
            <view class="product-content">
              <image :src="item.image" mode="aspectFit" class="product-image"></image>
              <view class="product-info">
                <view class="product-title text-bold">{{ item.title }}</view>
                <view class="product-price-box">

                  <text class="price">￥{{ item.price }}</text>
                  <text class="sold">已售{{ item.sold }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      currentCategory: 3,
      categories: [
        { name: '热销项目', id: 1 },
        { name: '红油美容', id: 2 },
        { name: '维修保养', id: 3 },
        { name: '车辆保养', id: 4 },
        { name: '车载装饰', id: 5 }
      ],
      productsData: {
        1: [
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/category/Rectangle%20676.png'
          },
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/car/car.png'
          },
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/car/car.png'
          }
        ],
        2: [
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/car/car.png'
          },
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/car/car.png'
          }
        ],
        3: [
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/category/Rectangle%20676.png'
          },
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/car/car.png'
          }
        ],
        4: [
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/car/car.png'
          }
        ],
        5: [
          {
            title: '[消费券直抵] 车业保养 金美孚机油',
            price: '99',
            sold: '568',
            image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/category/Rectangle%20676.png'
          }
        ]
      }
    }
  },
  computed: {
    // 获取当前分类的产品列表
    currentProducts() {
      const categoryId = this.categories[this.currentCategory].id;
      return this.productsData[categoryId] || [];
    }
  },
  methods: {
    // 切换分类
    switchCategory(index) {
      this.currentCategory = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.search-box {
  padding: 20rpx;

}

.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.left-menu {
  width: 192rpx;
  height: 100%;
  background-color: #D9D9D91A;
}

.menu-item {
  height: 64rpx;
  width: 156rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  position: relative;
  
  &.active {
    background-color:#FF1712;
    color:white;
    border-radius: 66rpx;
 

 
  }
}

.right-content {
  flex: 1;
  
  display: flex;
  flex-direction: column;
}


.product-container {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.product-item {
  margin-bottom: 20rpx;
  width: 508rpx;
  height: 210rpx;
}

.product-content {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.product-image {
  width: 164rpx;
  height: 210rpx;
  border-radius: 20rpx;
}

.product-info {
  flex: 1;
  margin-left: 20rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-size: 28rpx;
  color:#292421;
  line-height: 36rpx;

}

.product-price-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.price-symbol {
  font-size: 24rpx;
  color: #FF1712;
}

.price {
  font-size: 36rpx;
  color: #FF1712;
  font-weight: bold;
}

.sold {
  font-size: 20rpx;
  color: #ACACAC;
}
</style>